<script>
import TitleA from "@/comps/comm/TitleA.vue";
import apiWordTestPaper from "@/pages/v1/study/WordTestPaper/js/apiWordTestPaper";
import apiReadWrite from "@/pages/v1/study/ReadWrite/js/apiReadWrite";
import apiStudent from "@/pages/v1/study/Student/js/apiStudent";
import apiWordTestSummary from "@/pages/v1/study/WordTestSummary/js/apiWordTestSummary";

export default {
  name: 'test',
  components: {TitleA},
  data() {
    return {
      id:0,
      studentId:undefined,
      paper:{
        ids:[]
      },
      students:[],
      rwList:[],
      isAutoPlay:false,
      isPlaying:false,
      curPlayIndex:0,
      playInterval:5,//单位秒
      playTimer:null,
      updateKey:"",
    }
  },
  mounted() {
    this.id = this.$route.query.id * 1
    this.getTestPaper()
    this.getStudent()
  },
  methods:{
    getTestPaper(){
      apiWordTestPaper.find(this.id,res=>{
        console.log(res)
        this.paper = res.data
        this.getRwList()
      })
    },
    getRwList(){
      apiReadWrite.findBy({_where:{id__in:this.paper.ids},limit:0},res=>{
        this.rwList = res
      })
    },
    play(url){
      // 创建一个新的Audio对象并指定音频文件的路径
      var audio = new Audio(`/study/${url}`);
      // 播放声音
      audio.play();
    },
    startRead(){
      if (this.isPlaying){
        return
      }
      this.isPlaying = true
      this.playTimer = setInterval(()=>{
        this.play(this.rwList[this.curPlayIndex].url)
        this.curPlayIndex++
        if(this.curPlayIndex>=this.rwList.length){
          this.curPlayIndex = 0
        }
      },this.playInterval*1000)
    },
    stopRead(){
      this.isPlaying = false
      clearInterval(this.playTimer)
    },
    getStudent(){
      apiStudent.findBy({},res=>{
        this.students = res
      })
    },
    mark(mark,rw){
      rw.mark = mark
      this.updateKey  = new Date().getTime()
      apiWordTestSummary.mark({mark,rwId:rw.id,studentId:this.studentId},res=>{
        console.log(res)
      })
    }
  }
}
</script>

<template>
<div>
  <mu-card class="mar5 pad5 round3">
    <div class="flrc">
      <title-a class="padr20 fwb">测试</title-a>
      <div class="flex2 flex-r">
        <div style="width: 120px;" class="flrc"><span>自动播放 </span><mu-switch v-model="isAutoPlay"></mu-switch></div>
        <div class="padl9"><mu-text-field solo prefix="每" suffix="秒" style="width: 80px;" :disabled="!isAutoPlay" v-model="playInterval" type="number" :min="1" :max="10" :step="1"></mu-text-field></div>
      </div>
      <div>
        <mu-select solo style="width: 90px" placeholder="请选择学生" v-model="studentId">
          <mu-option v-for="(student,index) in students" :key="index" :label="student.name" :value="student.id"></mu-option>
        </mu-select>
        <mu-button color="success" flat @click="startRead">开始</mu-button>
        <mu-button color="error" flat @click="stopRead">停止</mu-button>
      </div>
      <div>
        <mu-button color="error" icon><mu-icon value="logout"></mu-icon></mu-button>
      </div>

    </div>
  </mu-card>
  <mu-card class="mart5 pad5">
    <title-a>听写测试</title-a>
    <div :key="updateKey">
      <div v-for="(rw,index) in rwList" :key="rw.id">
        <div class="flrc">
          <div class="pad5 fwb">第 {{index +1 }} 题</div>
          <div class="flex1">
            <mu-button :color="curPlayIndex === index ?`success`:`warning`" @click="play(rw.mp3)" icon><mu-icon value="play_circle"></mu-icon></mu-button>
          </div>
          <div class="flex1">
            <mu-button :color="rw.mark === undefined || rw.mark === 1?`success`:`default`" small flat @click="mark(1,rw)">标记为正确 <mu-icon value="check_circle" right></mu-icon></mu-button>
            <mu-button :color="rw.mark === undefined || rw.mark === 0?`error`:`default`" small flat @click="mark(0,rw)">标记为错题 <mu-icon value="cancel" right></mu-icon></mu-button>
          </div>
        </div>
      </div>
    </div>
  </mu-card>
</div>
</template>

<style scoped>

</style>